<template>
  <Modal v-model="isShow"
         footer-hide
         width="700"
         @on-cancel="closeEvent"
         :mask-closable="false"
         title="菜单设置">
    <Form ref="form" class="form" :label-width="80" :model="formData" :rules="rules">
      <FormItem label="角色名称" prop="roleName">
        <Input readonly v-model="roleName"/>
      </FormItem>
      <FormItem label="角色编码" prop="roleCode">
        <Input readonly v-model="formData.roleCode"/>
      </FormItem>
      <FormItem label="菜单权限" prop="menuCodes">
        <TreeSelect v-model="selectedMenuCodes" multiple show-checkbox :data="menuTree"/>
      </FormItem>
      <FormItem class="form-bottom-btn">
        <Button @click="submitBtnClick" type="primary">保存</Button>
      </FormItem>
    </Form>
  </Modal>
</template>

<script>

import {RESPONSE_CODE_SUCCESS} from "@/constant/response";
import {Message} from "view-ui-plus";
import {getDictDataName} from "@/util";
import {getWebMenuListAll, getWebMenuShowListAll, updateRoleMenu} from "@/api/sys/webMenu";

const formData = {
  roleCode: undefined,
}

export default {
  name: "SysRoleMenuEdit",
  data() {
    return {
      isShow: false,
      roleName: '',
      formData: {
        roleCode: undefined,
      },
      rules: {},
      menuTree: [],
      allMenu: [],
      selectedMenuCodes: [],
    }
  },
  created() {
    getWebMenuListAll().then(res => {
      this.buildMenuTree(res.data)
    })
  },
  methods: {
    async buildMenuTree(serverMenus) {
      let menuTree = [];
      let allMenu = [];
      for (let serverMenu of serverMenus) {
        if (serverMenu.code === 'My' || serverMenu.code === 'MyInfo') {
          continue
        }
        let menu = {
          title: serverMenu.showName + '-(' + await getDictDataName('YesNo:EnableDisable', serverMenu.menuStatus) + ')',
          expand: false,
          value: serverMenu.code,
          selected: false,
          checked: false,
          fatherCode: serverMenu.fatherCode
        }
        allMenu.push(menu)
        if (!menu.fatherCode || menu.fatherCode == '') {
          menuTree.push(menu)
        }
      }
      this.allMenu = allMenu;
      for (let child of allMenu) {
        if (!child.fatherCode || child.fatherCode == '') {
          continue
        }
        for (let father of allMenu) {
          if (child.fatherCode == father.value) {
            let children = [];
            if (father.children) {
              children = father.children
            }
            children.push(child)
            father.children = children
            break
          }
        }
      }
      this.menuTree = menuTree;
    },
    submitBtnClick() {
      this.$refs.form.validate((valid) => {
        if (!valid) {
          return
        }
        let saveData = this.$utils.clone(this.formData)
        saveData.menuCodes = this.selectedMenuCodes
        updateRoleMenu(saveData).then(res => {
          if (res.code == RESPONSE_CODE_SUCCESS) {
            Message.success("保存成功")
            this.isShow = false
          }
        })
      })
    },
    show({roleCode, roleName}) {
      this.formData = this.$utils.clone(formData)
      this.formData.roleCode = roleCode
      this.selectedMenuCodes = [];
      this.roleName = roleName

      getWebMenuShowListAll({
        showType: 2,
        roleCode: roleCode
      }).then(res => {
        let selectedMenuCodes = []
        let menuShowList = res.data
        for (let menu of this.allMenu) {
          menu.checked = false
          menu.selected = false
          for (let menuShow of menuShowList) {
            if (menuShow.webMenuCode == menu.value) {
              menu.checked = true
              selectedMenuCodes.push(menuShow.webMenuCode)
              break
            }
          }
        }
        this.selectedMenuCodes = selectedMenuCodes
        this.isShow = true
      })
    },
    closeEvent() {
      this.formData = this.$utils.clone(formData)
    },
  }
}
</script>

<style lang="less" scoped>

</style>
